<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-card>
      <el-form ref="searchForm" :model="searchForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="用户名">
              <el-input v-model="searchForm.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="角色筛选">
              <el-select v-model="searchForm.role" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option label="管理员" value="管理员"></el-option>
                <el-option label="部门经理" value="部门经理"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="组织筛选">
              <el-select v-model="searchForm.organization" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option label="技术部" value="技术部"></el-option>
                <el-option label="销售部" value="销售部"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mt-2">
          <el-col :span="7">
            <el-form-item label="账号状态">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option label="激活" value="激活"></el-option>
                <el-option label="未激活" value="未激活"></el-option>
                <el-option label="锁定" value="锁定"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="mt-2">
      <!-- 批量操作按钮 -->
      <div class="" style="display: flex; justify-content: space-between; margin-bottom: 20px;">
        <div>
          <el-button type="danger" plain @click="handleBulkDelete">批量删除</el-button>
          <el-button type="primary" plain @click="handleBulkOperation">批量操作</el-button>
        </div>
        <el-button type="primary" @click="addBasicSiteInfoShow">新建同步任务</el-button>
      </div>

      <!-- 用户列表 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="accountId" label="账号ID" width="150"></el-table-column>
        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
        <el-table-column prop="realName" label="真实姓名" align="center"></el-table-column>
        <el-table-column prop="organization" label="所属组织" align="center"></el-table-column>
        <el-table-column prop="role" label="角色" align="center"></el-table-column>
        <el-table-column prop="status" label="激活状态" align="center"></el-table-column>
        <el-table-column prop="lastLoginTime" label="上次登录时间" align="center"></el-table-column>
        <el-table-column prop="failedLoginCount" label="登录失败次数" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="mt-2">
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next, jumper" :total="totalItems"
          :current-page.sync="currentPage" :page-size="pageSize" @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
      </div>
    </el-card>

  </div>

</template>

<script setup>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn, ElPagination, ElDatePicker } from 'element-plus';

// 定义搜索表单数据模型
const searchForm = ref({
  username: '',
  role: '',
  organization: '',
  status: ''
});

// 定义表格数据
const tableData = ref([
  {
    accountId: 'SY1201_001',
    username: 'ECE13',
    realName: '王万',
    organization: '技术部',
    role: '管理员',
    status: '激活',
    lastLoginTime: '2025-01-11 22:11',
    failedLoginCount: 12312
  },
  // 更多数据...
]);

// 分页配置
const totalItems = ref(85);
const currentPage = ref(1);
const pageSize = ref(5);

// 处理搜索
function handleSearch() {
  console.log('Search:', searchForm.value);
}

// 处理重置
function handleReset() {
  searchForm.value = {
    username: '',
    role: '',
    organization: '',
    status: ''
  };
}

// 处理批量删除
function handleBatchDelete() {
  console.log('Batch Delete');
}

// 处理批量操作
function handleBatchOperation() {
  console.log('Batch Operation');
}

// 处理新增同步任务
function handleCreateAccount() {
  console.log('Create Account');
}

// 处理编辑
function handleEdit(index, row) {
  console.log('Edit:', index, row);
}

// 处理删除
function handleDelete(index, row) {
  console.log('Delete:', index, row);
}

// 处理分页大小变化
function handleSizeChange(size) {
  pageSize.value = size;
}

// 处理当前页变化
function handleCurrentChange(page) {
  currentPage.value = page;
}
</script>

<style scoped>
:deep(.el-form-item) {
  margin-bottom: 0px;
}
</style>